<template>
    <div class="page-mycenter">
        <div class="layout">
            <div class="navbar-wrap">
                <div class="nav">
                    <div class="navbar-title">我的</div>
                    <div class="nav-btn">
                        <img src="../assets/images/nav-button.png" alt="" class="nav-icon">
                    </div>
                </div>
            </div>
            <div class="page-content">
                <div class="my-center">
                    <div class="header" v-if="userList!=null">
                        <img :src="userList.userImgUrl" alt="">
                    </div>
                    <div class="header" v-else>
                        <img src="../assets/images/下载.png" alt="">
                    </div>
                    <div class="containerbox">
                        <div class="group">
                            <div class="mb-outline-tb">
                                <div class="orders">
                                    <div class="title">我的订单</div>
                                    <div class="mb-outline-b title-line"></div>
                                    <div class="list list-two">
                                        <div class="order-item movie">
                                            <div class="h" @click="toorder">
                                                <p>电影</p>
                                            </div>
                                        </div>
                                        <div class="order-item store">
                                            <div class="h" @click="towish">
                                                <p>想看</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="group">
                            <div class="mb-outline-tb">
                                <div class="item">
                                    <div class="mb-line-b">
                                        <span>优惠券</span>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="mb-line-b">
                                        <span>折扣卡</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                         <div :class="['removeLg', {'lgactive':removestate}]" @click="remove">
                            退出登录
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <bottom-tabs :index="4"></bottom-tabs>
    </div>
</template>

<script>
import { getUserData } from "../api/login.js";
import { ref } from "vue";
import { useRouter } from "vue-router";
import BottomTabs from "../components/BottomTabs.vue"
    export default {
        components:{
            BottomTabs
        },
     setup() {
        const router=useRouter()
        let userList=ref(null)
        let id=ref(null)
                
         let removestate=ref(false)
        let toorder=()=>{
         router.push('/orderlist')
        }
        let towish=()=>{
             router.push('/wishview')
        }
        let remove=()=>{
                window.localStorage.removeItem("token")
                window.localStorage.removeItem("userId")             
                removestate.value = true
                userList.value=null
                router.push('/login')
         }
        if (window.localStorage.getItem("userId")) {             
               id.value = window.localStorage.getItem("userId")
        }else{
                id.value=null
            }
            getUserData().then(data=>{
                if (id.value!=null) {
                    userList.value = data.data[0]
                }
            })
        
        
        return{
            userList,
            toorder,
            towish,
            remove,
            removestate,
        }
     }
    }
</script>

<style lang="less" scoped>
.page-mycenter{
    width: 100%;
    height: 100%;
    overflow: hidden;

    .layout{
        height: 100%;

        .navbar-wrap{
            height: 50px;

                .nav{
                    background-color: #e54847!important;
                    padding: 6px 0;
                    height: 38px;
                    width: 100%;
                    overflow: hidden;
                    position: relative;

                    .navbar-title{
                        color: #fff;
                        -webkit-box-flex: 1;
                        font-size: 18px;
                        font-weight: 500;
                        line-height: 2;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        text-align: center;
                    }
                    .nav-btn{
                        position: absolute;
                        right: 12px;
                        top: 50%;
                        margin-top: -8px;

                        .nav-icon{
                            width: 17px;
                            height: 16px;
                        }
                    }
                }
        }
        .page-content{
            height: 100%;
            background-color: #f5f5f5;

            .my-center{
                min-height: 100%;
                display: flex;
                flex-direction: column;

                .header {
                    background-color: #f03d37;
                    background-image: url(../assets/images/bg.png);
                    background-repeat: no-repeat;
                    background-position: 50%;
                    background-size: 100% 150px;
                    height: 150px;
                    overflow: hidden;
                    text-align: center;

                    &>img{
                        display: inline-block;
                        margin-top: 30px;
                        width: 60px;
                        height: 60px;
                        border-radius: 60px;
                        border: 3px solid #fff;
                    }
                }
                .containerbox{
                    flex: 1;

                    .group{
                        margin-top: 10px;
                        background: #fff;

                        .mb-outline-tb{
                            background-size: 1px 1px;
                            background: url("../assets/images/repeat-x-bottom-outline.png") 0 top repeat-x,
                            url("../assets/images/repeat-x-bottom-outline.png") 0 bottom repeat-x;

                            .orders{
                                padding: 0 15px;
                                position: relative;
                                overflow: hidden;
                                text-align: center;

                                .title{
                                    position: relative;
                                    margin: 13px 0 0;
                                    font-size: 15px;
                                    line-height: 21px;
                                    height: 21px;
                                    color: #333;
                                    z-index: 9;
                                    display: inline-block;
                                    width: 80px;
                                    background-color: #fff;

                                }
                                    .mb-outline-b{
                                        background: url("../assets/images/repeat-x-bottom-outline.png") 0 bottom repeat-x;
                                        background-size: 1px 1px;
                                    }
                                    .title-line{
                                        position: absolute;
                                        top: 23px;
                                        left: 50%;
                                        margin-left: -80px;
                                        width: 160px;
                                        height: 1px;
                                    }
                                    .list{
                                        overflow: hidden;
                                        width: 100%;
                                        display: flex;
                                        justify-content: center;

                                        .order-item {
                                            width: 50%;
                                            height: 97px;
                                            background-repeat: no-repeat;
                                            background-position: top;
                                            background-size: 42px auto;
                                            margin-top: 18px;

                                            .h{
                                                display: block;
                                                height: 90px;

                                                &>P{
                                                    position: relative;
                                                    top: 53px;
                                                    text-align: center;
                                                    font-size: 15px;
                                                    line-height: 21px;
                                                    height: 21px;
                                                    margin: 0;
                                                    color: #333;
                                                }
                                            }
                                        }
                                        .movie{
                                            background-image: url("../assets/images/movie.png");
                                        }
                                        .store{
                                            background-image: url("../assets/images/16.可见_可视_眼睛.png");
                                        }
                                    }
                            }
                            .item{
                                position: relative;
                                height: 44px;
                                line-height: 44px;
                                font-size: 15px;
                                margin-left: 15px;
                                padding-right: 15px;

                                .mb-line-b{
                                    display: block;
                                    color: #333;
                                    background: url("../assets/images/repeat-x-bottom-outline.png") 0 bottom repeat-x;
                                    background-size: 1px 1px;

                                    &>span{
                                        text-align: left;
                                    }
                                }
                                &::after{
                                    position: absolute;
                                    right: 15px;
                                    top: 18px;
                                    display: inline-block;
                                    content: "";
                                    width: 8px;
                                    height: 8px;
                                    border-left: 1px solid #ccc;
                                    border-top: 1px solid #ccc;
                                    transform: rotate(135deg);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .removeLg{
        width: 60%;
        height: 44px;
        line-height: 44px;
        margin: 0 auto;
        text-align: center;
        border-radius: 12px;
        background-color: #f03d37;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 0.8px;
        color: #fff;
         margin-top: 50px;
    }
    .lgactive{
        background-color: #f2f2f2;
        color: #53361c;
    }
}
</style>